<template>
	<view>
		<view class="sr_title">
			<view class="sr_title1">
				<view @tap="goBack">
					<image src="../../../static/img/zjt.png" mode="widthFix"></image>
					返回
				</view>
				<view>
					我要收款
				</view>
			</view>
		</view>
		<!-- <view style="width: 100%;height: 10vh;"></view> -->
		<camera device-position="back" flash="off" mode="scanCode" @scancode="scancodeEventHandle" @error="error"
			style="width: 100%;height: 80vh;position: relative;background-color: rgba(0, 0, 0, 0.5);z-index: 1"
			v-if="!mode">
			<view class="mark" v-show="isShowMark" :style="{ left: obj.l + 'px', top: obj.t +'px' }"></view>
			<cover-view class="controls" style="width: 100%; height: 100%">
				<cover-view class="controls1-bgcolor"></cover-view>
				<cover-view class="camera-bgcolor">
					<cover-view class="center-top"></cover-view>
					<cover-view class="center" id="myCamera">
						<!-- 身份证正面 -->
						<!-- <cover-image v-if="photoType == 'idCardCopy'" class="cover_img"
							src="../../static/images/sfzz.png" mode="widthFix" /> -->
						<!-- 身份证反面 -->
						<!-- <cover-image v-else-if="photoType == 'idCardNational'" class="cover_img"
							src="../../static/images/sfzf.png" mode="widthFix" /> -->
						<!-- 银行卡正面或反面 -->
						<!-- <cover-image v-else-if="photoType == 'bankCardPicFront' || photoType == 'bankCardPicBack'"
							class="cover_img" src="../../static/images/bank.png" mode="widthFix" /> -->

					</cover-view>
					<cover-view class="center-bottom"></cover-view>
				</cover-view>
				<cover-view class="controls3-bgcolor"></cover-view>
			</cover-view>
		</camera>
		<view class="scan-line" v-if="!mode"></view>
		<view style="width: 100%;height: 80vh;" v-else>
			<view class="sr_content">
				<view class="sr_content1">
					<input v-model="qrCode" placeholder="请输入消费码" />
					<button class="center" @click="consumption()">确定</button>
				</view>
				<text>请输入买家消费码，输入成功后，买家付款金额会自动转到您的账户中</text>
			</view>
		</view>
		<view class="daohang" :style="[mode? {'background-color': 'white'}:{}]">
			<view :style="[mode? {}:{'color': '#0BBC4B'}]" @click="mode = 0">
				<image :src="mode? '../../../static/f/003.png':'../../../static/f/001.png'" mode="widthFix"></image>
				<text>扫码模式</text>
			</view>
			<view :style="[mode? {'background-color': '#0BBC4B','color': 'white'}:{}]" @click="mode = 1">
				<image :src="mode? '../../../static/f/004.png':'../../../static/f/002.png'" mode="widthFix"></image>
				<text>输入模式</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderCheckApi
	} from '@/api/order.js'
	import {
		reactive,
		toRefs,
		ref,

	} from "vue"
	export default {
		setup() {
			const state = reactive({
				qrCode: '',
				lockSet: {},
				obj: {
					l: 0,
					t: 0
				},
				status: false,
				isShowMark: false,
				mode: false,
			})

			//返回页面
			const goBack = () => {
				uni.navigateBack(-1)
			}
			//扫码事件
			const scancodeEventHandle = (res) => {
				let rawData = res.target.rawData;
				if (Object.hasOwn(state.lockSet, rawData) === false) {
					state.lockSet[rawData] = true;
					console.log(`扫码响应结果：${JSON.stringify(res)}`);

					state.isShowMark = false; // 开始前先隐藏上一次显示的标记点
					let result = res.target.result

					// 震动提示
					uni.vibrateShort({
						success: async () =>
							await consumption(result)
					});
					// 标记位置
					markQrCode(res.target);

					// 同一个码间隔几秒才会再次处理
					setTimeout(that => delete state.lockSet[rawData], 3000);
				}
			}
			const consumption = async (qrCode) => {
				if (!qrCode && !state.qrCode) {
					uni.$u.toast("请输入消费码");
					return false

				}
				uni.showLoading({
					title: "收款中.."
				})
				state.status = true
				try {
					await orderCheckApi(
						qrCode ? qrCode : state.qrCode
					)

					uni.showToast({
						title: '收款成功',
						icon: 'success',
						duration: 1000
					});
					state.status = false
					uni.hideLoading()

				} catch {
					state.status = false
					uni.hideLoading()
				}


			}
			//扫码时绿点的标记
			const markQrCode = (target) => {
				// [左上角x坐标，左上角y坐标，width，height] 单位px
				let [left, top, width, height] = target.scanArea;
				let markWH = uni.upx2px(64) / 2; // mark是边长64rpx的方形，要转成 px
				// 算出显示标记的位置
				state.obj = {
					"l": left + width / 2 - markWH,
					"t": top + height / 2 - markWH
				};
				// 显示标记点
				state.isShowMark = true;
				// 无任何外力情况下，5秒后也会消失
				setTimeout(that => state.isShowMark = false, 5000);
			}
			const error = (err) => {
				console.log(`报错：${JSON.stringify(err)}`);
				debugger;
			}


			return {
				...toRefs(state),
				goBack,
				consumption,
				scancodeEventHandle,
				markQrCode,
				error,
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	camera {
		/* margin: 50rpx auto; */
		width: 500rpx;
		height: 500rpx;
	}

	.mark {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		background-color: #00ff00;
		border: 5px solid #f8ffeb;
		border-radius: 50%;
	}

	.kuang {
		width: 100%;
		height: 80vh;
		background-color: #000;
		position: absolute;
		top: 10vh;
		left: 0;
		opacity: 0.6;
		z-index: 2;
	}

	.controls {
		display: flex;
		align-items: center;
		justify-content: center;
		// flex-direction: column;
	}

	.controls1-bgcolor {
		list-style: none;
		padding: 0;
		margin: 0;
		// width: 22%;
		width: calc((100% - 522rpx) / 2);
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.camera-bgcolor {
		// width: 66%;
		width: 820rpx;
		height: 100%;
	}

	.center {
		width: 100%;
		height: 550rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.center-top {
		width: 100%;
		height: calc((100% - 550rpx) / 2);
		background-color: rgba(0, 0, 0, 0.6);
	}

	.center-bottom {
		width: 100%;
		height: calc((100% - 550rpx) / 2);
		background-color: rgba(0, 0, 0, 0.6);
	}

	.cover_img {
		width: 720rpx;
	}

	.controls3-bgcolor {
		list-style: none;
		padding: 0;
		margin: 0;
		width: calc((100% - 520rpx) / 2);
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}


	.scan-line {
		position: absolute;
		top: 50%;
		/* 扫描线条初始位置 */
		left: 15%;
		/* 与扫码框左边距保持一致 */
		width: 70%;
		/* 扫描线条宽度 */
		height: 6px;
		/* 扫描线条高度 */
		background: linear-gradient(to right, rgba(255, 255, 255, 0.2), #00BE4C, rgba(255, 255, 255, 0.2));
		border-radius: 50%;
		animation: scan-animation 3s infinite linear;
		z-index: 3;
	}

	@keyframes scan-animation {
		0% {
			transform: translateY(-100px);
		}

		100% {
			transform: translateY(100px);
		}
	}

	.daohang {
		width: 100%;
		height: 10vh;
		background-color: #0C0A06;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		view {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #999;
			font-size: 28rpx;

			image {
				width: 20%;
				height: 100%;
				margin: 5% 0;
			}
		}
	}

	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: relative;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.sr_content {
		width: 100%;
		height: 35vh;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.sr_content1 {
			width: 85%;
			height: 20%;
			display: flex;
			align-items: center;
			justify-content: center;

			input {
				width: 70%;
				height: 100%;
				font-size: 40rpx;
				border-radius: 20rpx 0 0 20rpx;
				border-top: 1rpx solid #999;
				border-left: 1rpx solid #999;
				background-color: #eaeaea;
			}

			button {
				width: 30%;
				height: 100%;
				background-color: #06BF4E;
				color: white;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0 20rpx 20rpx 0;
			}
		}

		text {
			width: 90%;
			color: #ADADAD;
			margin: 5% 0;
		}
	}
</style>